<template>
	<view>
		<zmm-watermark :watermark="userStore.watermark" v-if="userStore.watermark"></zmm-watermark>
		<view class="content detail">
			<!--调拨信息-->
			<view class="detail-item">
				<uni-section title="调拨信息" type="line"></uni-section>
				<view class="detail-content">
					<view class="detail-text">
						调拨单号：
						<text>{{info.number}}</text>
						<text class="detail-text-copy" @click="copyText(info.number)">复制</text>
					</view>
					<view class="detail-text">调拨发起仓库：<text>{{info.formWarehouseName}}</text></view>
					<view class="detail-text">发货仓库：<text>{{info.formWarehouseName}}</text></view>
					<view class="detail-text">目的地仓库：<text>{{info.destinationWarehouseName}}</text></view>
					<view class="detail-text">调拨状态：<uni-tag size="small" :text="arrText(allStatusList, info.status)" /></view>
					<view class="detail-text">发起时间：<text>{{info.createTime}}</text></view>
					<view class="detail-text">发货时间：<text>{{info.sendTime}}</text></view>
					<view class="detail-text">到货时间：<text>{{info.arriveTime}}</text></view>
					<view class="detail-text">调拨说明：<text>{{info.remark}}</text></view>
				</view>
			</view>
			
			<!--调拨商品-->
			<view class="detail-item" v-if="checkPermi(['zhouyz:warehouseAllocation:detail'])">
				<uni-section title="调拨商品" type="line"></uni-section>
				<view class="detail-content table">
					<ty-table
						:data="tableList"
						:columns="columns"
						:sortable="true"
						:cellClassName="() => 'table-cell'"
						:headerCellClassName="() => 'table-cell'"
						:rowClassName="() => 'table-row'"
						stripe
						border>
						<template v-slot:left="{ row }">
							<view class="table-cell">
								<view class="table-td-row">
									商品名称：
									<text class="table-td-text">{{row.productName}}</text></view>
								<view class="table-td-row">
									批次号：
									<text class="table-td-text">{{row.batchNumber}}</text></view>
							</view>
						</template>
						<template v-slot:right="{ row }">
							<view class="table-cell">
								<view class="table-td-row">
									单位：
									<text class="table-td-text">{{row.unit}}</text></view>
								<view class="table-td-row" v-if="checkPermi(['zhouyz:warehouseAllocation:price'])">
									采购价格：
									<text class="table-td-text">{{row.purchasePrice}}</text></view>
								<view class="table-td-row">
									调拨数量：
									<text class="table-td-text">{{row.number}}</text></view>
							</view>
						</template>
					</ty-table>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { computed, onMounted, ref } from 'vue';
import { tab, auth, modal } from "@/plugins"
import { getTitle } from "@/utils/getter"
import { checkPermi, checkRole, checkOnlyPermi, checkOnlyRole } from "@/utils/permission"
import { allocationStatus } from "@/api/system/dict/data"
import { warehouseAllocationDetail, warehouseAllocationProduct } from "@/api/erp_api/warehouse"
import { copyText, arrText } from '@/utils/ty.js'
import useUserStore from '@/store/modules/user'

	const userStore = useUserStore()
	onLoad(async (option) => {
		if (option.id) {
			id.value = option.id
			await getAllocationStatus()
			getDetail()
			if (checkPermi(['zhouyz:warehouseAllocation:detail'])) {
				getList()
			}
		}
	})
	
	// 仓库调拨状态
	const allStatusList = ref([])
	const getAllocationStatus = () => {
		return allocationStatus().then(res => {
			allStatusList.value = res.data.map(item => {
				return {
					...item,
					value: item.dictValue,
					text: item.dictLabel
				}
			}) || []
		})
	}
	
	// 数据查询
	const id = ref('')
	const info = ref({})
	const isLoading = ref(false)
	
	const getDetail = () => {
		const params = {
			id: id.value
		}
		isLoading.value = true
		uni.showLoading({
			title: '数据加载中...'
		})
		warehouseAllocationDetail(params).then(res => {
			info.value = res.data || {}
			isLoading.value = false
			uni.hideLoading()
    }).catch(() => {
			isLoading.value = false
			uni.hideLoading()
		})
	}
	
	// 调拨商品
	const columns = ref([
		{ title: '商品信息', key: 'left'},
		{ title: '调拨信息', key: 'right', width: '260rpx' }
	])
	
	const tableList = ref([])
	
	const getList = () => {
		warehouseAllocationProduct({
			id: id.value
		}).then(res => {
			tableList.value = res.data || []
	  })
	}
</script>

<style scoped lang="scss">
.detail-text-integral {
	margin-left: 20rpx;
}
.detail-text-banners {
	margin-left: -10rpx;
}
.detail-text-banner {
	margin: 0 10rpx 10rpx;
}
.detail-text-video {
	width: 100%;
	height: 250rpx;
}
</style>
